<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>M103</title>
    <!--框架必需start-->
    <script type="text/javascript" src="../../libs/js/jquery.js"></script>
    <script type="text/javascript" src="../../libs/js/language/cn.js"></script>
    <script type="text/javascript" src="../../libs/js/framework.js"></script>
    <link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
    <link rel="stylesheet" type="text/css" id="customSkin"/>
    <!--框架必需end-->
    <link rel="stylesheet" type="text/css" href="../../sample_skin/demo/style/style.css"/>

    <script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>

    <!--基本选项卡start-->
    <script type="text/javascript" src="../../libs/js/nav/basicTab.js"></script>
    <!--基本选项卡end-->

    <!--self开始-->
    <link rel="stylesheet" href="../../assets/css/m_style.css" class="m_style">
    <!--self结束-->
</head>

<body>
<div class="m_pos">
    <img src="../../assets/images/position.png" alt="" class="m_position">
    <span>当前页面：</span>
    <span class="m_pos_lo">SCB/SPD></span>
    <span class="m_pos_lo" >三层></span>
    <span class="m_pos_lo">病房></span>
    <span class="m_pos_local">SCB/SPD</span>
</div>
<div class="page_content">
    <div class="infoCard infoCard2">
        <div class="basicTab" id="tab-9">
            <div name="列表显示" style="width:100%;position:relative">
                <div class="m_serialNumber">设备编号：
                    <span id="eq_id">全部</span>
                </div>
                <div id="dataBasic"></div>
            </div>
            <div name="图标统计"  style="width:100%;">
                <div class="m_iconStatistics">
                    <p><span>状态表</span></p>
                    <table class="m_iconStatistics_table" cellpadding="0" cellspacing="0">
                        <tr>
                            <th class="l-grid-hd-cell-inner m_table_w5">SCB</th>
                            <th class="l-grid-hd-cell-inner m_table_w5">SPD</th>
                            <th class="l-grid-hd-cell-inner m_table_w5">安装日期</th>
                            <th class="l-grid-hd-cell-inner m_table_w5">下次检测日期</th>
                            <th class="l-grid-hd-cell-inner m_table_w5">漏电流</th>
                        </tr>
                        <tr class="l-grid-row">
                            <td class="l-grid-row-cell" id="scb"></td>
                            <td class="l-grid-row-cell" id="spd"></td>
                            <td class="l-grid-row-cell" id="setDate"></td>
                            <td class="l-grid-row-cell" id="checkDate"></td>
                            <td class="l-grid-row-cell" id="area"></td>
                        </tr>
                    </table>
                </div>
                <div class="m_iconStatistics">
                    <p><span>SCB基本参数表</span><img src="../images/SCB_num.png" alt=""></p>
                    <table class="m_iconStatistics_table" cellpadding="0" cellspacing="0">
                        <tr>
                            <th class="l-grid-hd-cell-inner m_table_w4" >Ics</th>
                            <th class="l-grid-hd-cell-inner m_table_w4">Lemax</th>
                            <th class="l-grid-hd-cell-inner m_table_w4">LI</th>
                            <th class="l-grid-hd-cell-inner m_table_w4">SCB型号</th>
                        </tr>
                        <tr class="l-grid-row">
                            <td class="l-grid-row-cell" id="Ics"></td>
                            <td class="l-grid-row-cell" id="lemax"></td>
                            <td class="l-grid-row-cell" id="li"></td>
                            <td class="l-grid-row-cell" id="SCB_type"></td>
                        </tr>
                    </table>
                </div>
                <div class="m_iconStatistics">
                    <p><span>SPD基本参数表</span><img src="../images/SPD_num.png" alt=""></p>
                    <table class="m_iconStatistics_table" cellpadding="0" cellspacing="0">
                        <tr>
                            <th class="l-grid-hd-cell-inner m_table_w5">
                                In
                            </th>
                            <th class="l-grid-hd-cell-inner m_table_w5">Lmax</th>
                            <th class="l-grid-hd-cell-inner m_table_w5">Uc</th>
                            <th class="l-grid-hd-cell-inner m_table_w5">Up</th>
                            <th class="l-grid-hd-cell-inner m_table_w5">SPD型号</th>
                        </tr>
                        <tr class="l-grid-row">
                            <td class="l-grid-row-cell" id="In"></td>
                            <td class="l-grid-row-cell" id="lmax"></td>
                            <td class="l-grid-row-cell" id="Uc">数据</td>
                            <td class="l-grid-row-cell" id="Up">数据</td>
                            <td class="l-grid-row-cell" id="SPD_type">M1513323</td>
                        </tr>
                    </table>
                </div>
                <div class="m_iconStatistics" id="doubleTable">
                    <p><span>双电源表</span><img src="../images/double.png" alt=""></p>
                    <table class="m_iconStatistics_table" cellpadding="0" cellspacing="0">
                        <tr>
                            <th class="l-grid-hd-cell-inner m_table_w6">动作控制</th>
                            <th class="l-grid-hd-cell-inner m_table_w6">双电源形式</th>
                            <th class="l-grid-hd-cell-inner m_table_w6">备用电源过压转换值</th>
                            <th class="l-grid-hd-cell-inner m_table_w6">备用电源欠压转换值</th>
                            <th class="l-grid-hd-cell-inner m_table_w6">备用电源电压值</th>
                            <th class="l-grid-hd-cell-inner m_table_w6">详细信息</th>
                        </tr>
                        <tr class="l-grid-row">
                            <td class="l-grid-row-cell" id="actionControl"></td>
                            <td class="l-grid-row-cell" id="el1Type"></td>
                            <td class="l-grid-row-cell" id="el1BackOver"></td>
                            <td class="l-grid-row-cell" id="el1BackUnder"></td>
                            <td class="l-grid-row-cell" id="el1BackUp"></td>
                            <td class="l-grid-row-cell">
                                <p class="m_double_info" onclick='openDouble()' >显示信息</p>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="m_iconStatistics" id="moreTable">
                    <p><span>多功能表</span><img src="../images/more_biao.png" alt=""></p>
                    <table class="m_iconStatistics_table" cellpadding="0" cellspacing="0">
                        <tr>
                            <th class="l-grid-hd-cell-inner m_table_w7">A相电压</th>
                            <th class="l-grid-hd-cell-inner m_table_w7">B相电压</th>
                            <th class="l-grid-hd-cell-inner m_table_w7">C相电压</th>
                            <th class="l-grid-hd-cell-inner m_table_w7">A相电流</th>
                            <th class="l-grid-hd-cell-inner m_table_w7">B相电流</th>
                            <th class="l-grid-hd-cell-inner m_table_w7">C相电流</th>
                            <th class="l-grid-hd-cell-inner m_table_w7">详细信息</th>
                        </tr>
                        <tr class="l-grid-row">
                            <td class="l-grid-row-cell" id="aVoltage">数据</td>
                            <td class="l-grid-row-cell" id="bVoltage">数据</td>
                            <td class="l-grid-row-cell" id="cVoltage">数据</td>
                            <td class="l-grid-row-cell" id="aa">数据</td>
                            <td class="l-grid-row-cell" id="ba">M1513323</td>
                            <td class="l-grid-row-cell"  id="ca">M1513323</td>
                            <td class="l-grid-row-cell">
                                <p class="m_double_info" onclick='openMore()'>显示信息</p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div name="PDF显示" style="width:100%; ">
                <embed  width="100%"  id="showPdf"  style="height: 100%" >
                <img src="../images/undate.png" alt="" class="m_undate" >
                <p class="m_untext" >暂无内容</p>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">
    var ctr="http://www.chinalightning.com.cn/api/light/";
    var params =decodeURIComponent(window.location.search)
    params=params.substr(8).split(",");
    var queryData={
        Floor:params[0],
        Dtu_name: params[1],
        Area :params[2]
    }
    var url="http://www.chinalightning.com.cn/api/static/dtu_pdf/"+params[1]+".pdf";
   // $("#showPdf").attr("src",url);
    $(".m_undate").hide();
    $(".m_untext").hide();
    $("#showPdf").attr("src",url);

    var gridData = {
        "form.paginate.pageNo": 1,
        "form.paginate.totalRows": 13}
        function reshData(){
            var rows=[];
            $.post(ctr, queryData ,function (res) {
                if (res.message==200){
                    var dataKey=res.fl_equipment_list;
                    if (dataKey.length!=0){
                        var res=[];
                        dataKey.forEach((value,key)=>{
                            var convertData={};
                            convertData.id=value["柜号"];
                            convertData.state=value["在线状态"];
                            convertData.SCB_state=value["SCB状态"];
                            convertData.SPD_state=value["SPD状态"];
                            convertData.set_date=value["安装日期"];
                            convertData.check_date=value["检测日期"];
                            convertData.floor_name=value["楼层"];
                            convertData.set_area=value["区域"];
                            convertData.set_point=value["安装点"];
                            convertData.name=value["安装日期"];
                            //convertData.check_date=value["SPD寿命"];
                            rows.push(convertData);
                        });
                        gridData.rows=rows;
                       // grid.options.data =rows;
                        grid.loadData();
                       // grid.reRender()
                    }
                }else {
                    top.Dialog.alert("查询无结果");
                }
            })
        }
    initComplete()
    reshData();
    setInterval(reshData,2000);


    var grid = null;
    //列表显示

    function initComplete() {
        grid = $("#dataBasic").quiGrid({
            columns: [{
                display: '柜号',
                name: 'id',
                width: "10%",
                cellClick: true
            }, {
                display: '无线传感器在线状态',
                name: 'state',
                width: "12%",
                render: function (rowdata, rowindex, value, column) {
                    if ("off"==value){
                        return "<span style='color: red'>"+value+"</span>"
                    }else{
                        return value;
                    }
                }
            }, {
                display: 'SCB状态',
                name: 'SCB_state',
                width: "9%",
                render: function (rowdata, rowindex, value, column) {
                    if ("off"==value){
                        return "<span style='color: red'>"+value+"</span>"
                    }else{
                        return value;
                    }
                }
            }, {
                display: 'SPD状态',
                name: 'SPD_state',
                width: "9%",
                render: function (rowdata, rowindex, value, column) {
                    if ("off"==value){
                        return "<span style='color: red'>"+value+"</span>"
                    }else{
                        return value;
                    }
                }
            }, {
                display: '安装日期',
                name: 'set_date',
                width: "10%"
            }, {
                display: '下次检测日期',
                name: 'check_date',
                width: "10%"
            }, {
                display: '楼层',
                name: 'floor_name',
                width: "10%"
            }, {
                display: '安装点',
                name: 'set_point',
                width: "10%"
            }, {
                display: '区域',
                name: 'set_area',
                width: "10%"
            }, {
                display: 'SPD寿命',
                name: 'name',
                align: 'left',
                width: '10%',
                render: function (rowdata, rowindex, value, column) {

                    var mainCon = $('<div></div>');
                    var per=datedifference(value);
                    var color="spd_life_con_un";
                    if (per<30)
                        color="spd_life_con_red";
                    else if (per>70)
                        color="spd_life_con_full";



                    //30% 以下是红色 spd_life_con_red  30-70 是蓝色spd_life_con_un   70以上是绿色spd_life_con_full
                    var con = $('<span class="spd_life"></span>');
                    var con1=$('<div class="spd_life_con "></div>');
                    con1.addClass(color);
                    con1.css("width",per+"%");
                    con.append(con1);
                    mainCon.append(con);
                    return mainCon.html();
                }
            }
            ],
            data: gridData,
            sortName: 'id',
            rownumbers: false,
            checkbox: false,
            height: '100%',
            width: "100%",
            pageSize: 10,
            percentWidthMode: true,
            // onAfterShowData: onAfterShowData,
        });
    }

    function onAfterShowData(data) {

        $("#dataBasic").find(".popupMenu").each(function () {
            $(this).hover(function () {
                $(this).find(".popupMenu_con").show();
            }, function () {
                $(this).find(".popupMenu_con").hide();
            });
        })
    }

    function datedifference(startDate) {

        //sDate1和sDate2是2006-12-18格式

        var dateSpan,
            iDays;

        startDate = Date.parse(startDate);

        endDate =new Date();

        dateSpan = endDate - startDate;

        dateSpan = Math.abs(dateSpan);

        iDays = Math.floor(dateSpan / (24 * 3600 * 1000));

        iDays= (3650-iDays)/365*10

        //保留5位小数
        return iDays.toFixed(3)

    };

    var el1={}; //双电源表
    var el2={};//多功能表
    $("#tab-9").bind("actived",function(e,i){
        //加载数据
        if (i == 1) {
            $.post("http://www.chinalightning.com.cn/api/search_light/", {Dtu_name: queryData.Dtu_name}, function (res) {
                if (res.message == 200) {
                    var scb_spd_state=res["scb_spd状态表"][0];
                    var scb_spd_data=res["scb/spd基本参数表"];
                    el1=res["双电源表"][0];
                    el2=res["多功能表"][0];
                    var scb=scb_spd_data.SCB;
                    var spd=scb_spd_data.SPD;
                    for (var str in scb){
                        $("#"+str).html(scb[str])
                    }
                    for (var str in spd){
                        $("#"+str).html(spd[str])
                    }
                    $("#scb").html(scb_spd_state["SCB"]);
                    $("#spd").html(scb_spd_state["SPD"]);
                    $("#setDate").html(scb_spd_state["安装日期"]);
                    $("#checkDate").html(scb_spd_state["下次检测日期"]);
                    $("#area").html(scb_spd_state["漏电流"]);
                    if (res.is_active.DualPower_isactive=="true") {
                        //双源电表
                        $("#actionControl").html(el1["动作控制"]);
                        $("#el1Type").html(el1["双电源形式"]);
                        $("#el1BackOver").html(el1["备用电源过压转换值"]);
                        $("#el1BackUnder").html(el1["备用电源欠压转换值"]);
                        $("#el1BackUp").html(el1["备用电源电压值"]);
                    }else
                    {$("#doubleTable").css("display","none")}

                    if (res.is_active.multifunction_isactive=="true") {
                        //多功能表
                        $("#aVoltage").html(el2["A相电压"]);
                        $("#bVoltage").html(el2["B相电压"]);
                        $("#cVoltage").html(el2["C相电压"]);
                        $("#aa").html(el2["A相电流"]);
                        $("#ba").html(el2["B相电流"]);
                        $("#ca").html(el2["C相电流"]);
                    }else{
                        $("#moreTable").css("display","none")

                    }





                }
                else
                {
                    top.Dialog.alert("当前无记录");
                }

            });


        }
    });


    function openDouble(){
        top.Dialog.open({URL:"../../assets/html/M103_double_del.html",Title:"双电源表 ",Width:1160,Height:256,ParamsObj:el1});
    }
    function openMore(){
        top.Dialog.open({URL:"../../assets/html/M103_more_del.html",Title:"多功能表 ",Width:1200,Height:500,ParamsObj:el2})
    }


</script>
</body>

</html>
